---
title: Carousel
description: A carousel presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides. Typically, one slide is displayed at a time, and users can activate a next or previous slide control that hides the current slide and "rotates" the next or previous slide into view. In some implementations, rotation automatically starts when the page loads, and it may also automatically stop once all the slides have been displayed. While a slide may contain any type of content, image carousels where each slide contains nothing more than a single image are common.
docType: Demo
docGroup: Components
group: Navigation
hooks: [useCarousel]
keywords: [Navigation, Transition]
components:
  [
    Card,
    CardContent,
    ResponsiveItemOverlay,
    Tab,
    TabList,
    Slide,
    SlideContainer,
  ]
---

# Carousel

A carousel presents a set of items, referred to as slides, by sequentially
displaying a subset of one or more slides. Typically, one slide is displayed at
a time, and users can activate a next or previous slide control that hides the
current slide and "rotates" the next or previous slide into view. In some
implementations, rotation automatically starts when the page loads, and it may
also automatically stop once all the slides have been displayed. While a slide
may contain any type of content, image carousels where each slide contains
nothing more than a single image are common.

See more about this pattern [here](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/).

## Carousel Example

This is an example of using the `useCarousel` hook and a few other components
within `react-md` to create an accessible carousel. This demo was based off of
the
[Image Carousel with Tabs](https://www.w3.org/WAI/ARIA/apg/example-index/carousel/carousel-2-tablist.html)
example.

```demo source="./CarouselExample.tsx"

```
